.inputTask {
    display: grid;
    grid-template-columns: 1fr 50px 50px;
    margin-bottom: 15px;
    background: #DBE2EF;
    border-radius: 5px;
    padding-right: 15px;

    &Label {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        padding: 12px 15px;
        cursor: pointer;
    }

    &Checkbox {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    &Title {
        padding: 5px;
        line-height: 1.2;
    }

    &EditTitle {
        font: 1rem/1em 'Roboto', sans-serif;
        border: none;
        padding: 5px;
        background: none;
        box-shadow: 0 4px 0 -3px #3F72AF;
    }

    &Edit, &Remove, &Save {
        display: block;
        border: none;
        background: none no-repeat center center;
        cursor: pointer;
        padding: 0;
        transition: opacity 0.3s;

        &:hover {
            opacity: 0.7;
        }
    }

    &Edit {
        background-image: url('./images/edit.svg');
    }

    &Remove {
        background-image: url('./images/trash.svg');
    }

    &Save {
        background-image: url('./images/check.svg');
    }
}